<template>
    <div class="chat-container">
      <div class="chatlist">
        <ChatList :list="null" @select-chat="selectChat" />
      </div>
      <div class="chatbox">
        <ChatBox v-if="selectedChat" :chat="selectedChat" />
      </div>
    </div>
  </template>
  
  <script>
  import ChatList from './chat-list';
  import ChatBox from './chat-box';
  
  export default {
    components: {
      ChatList,
      ChatBox
    },
    data() {
      return {
        selectedChat: null
      };
    },
    methods: {
      selectChat(chat) {
        this.selectedChat = chat;
      }
    }
  };
  </script>
  
  <style scoped>
  .chat-container {
  display: flex;
  height: 90vh; /* 占满视口高度 */
}
.chatlist {
  width: 22%; /* 缩小宽度，原宽度为 33%，现在缩小三分之一 */
  border-right: 1px solid #e6e6e6;
  padding: 10px;
  position: relative;
  height: calc(100vh - 100px); /* 占满剩余高度 */
  overflow-y: auto; /* 添加滚动条，防止内容溢出 */
}

/* 顶部按钮样式 */
.new-chat-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}
.chatbox {
  width: 78%; /* 占满剩余宽度 */
  padding: 10px;
  height: calc(100vh - 100px); /* 占满剩余高度 */
  overflow-y: auto; /* 添加滚动条，防止内容溢出 */
}
.new-chat-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  color: #409EFF; /* Element UI 的主色调 */
}
.add-chat{
   height: 25px;
}
  </style>